<script lang="ts" setup>
import eventBus from '~/composables/eventBus'

function handleMenuClick(index: string) {
  switch (index) {
    case '1': eventBus.emit('upload-click'); break
    case '2': eventBus.emit('convert-click'); break
    case '3': eventBus.emit('refresh-nodes-click'); break
    case '3-2': eventBus.emit('refresh-tables-click'); break
    case '3-3': eventBus.emit('refresh-all-click'); break
    case '4-1': eventBus.emit('export-csv-click'); break
    case '4-2': eventBus.emit('export-xls-click'); break
    case '4-3': eventBus.emit('export-xlsx-click'); break
    case '5': eventBus.emit('about-click'); break
  }
}
</script>

<template>
  <el-menu
    class="menu" mode="horizontal" background-color="rgb(59, 130, 246)" text-color="#fff"
    :style="{ 'border-bottom': 'none' }" active-text-color="#fff" @select="handleMenuClick"
  >
    <el-menu-item index="1" class="text-2xl">
      <template #title>
        <el-icon i-carbon:cloud-upload />
        <span class="text-xl">上传</span>
      </template>
    </el-menu-item>
    <el-menu-item index="2" route="/usage">
      <el-icon i-carbon:job-run />
      <span class="text-xl">转换</span>
    </el-menu-item>
    <el-menu-item index="3" route="/usage">
      <el-icon i-ic:twotone-refresh />
      <span class="text-xl">刷新</span>
    </el-menu-item>
    <el-sub-menu index="4">
      <template #title>
        <el-icon i-bi:download />
        <span class="text-xl">导出</span>
      </template>
      <el-menu-item index="4-1" route="/usage">
        <el-icon i-bi:filetype-csv />
        <span class="text-l">导出CSV</span>
      </el-menu-item>
      <el-menu-item index="4-2" route="/usage">
        <el-icon i-bi:filetype-xls />
        <span class="text-l">导出XLS</span>
      </el-menu-item>
      <el-menu-item index="4-3" route="/usage">
        <el-icon i-bi:filetype-xlsx />
        <span class="text-l">导出XLSX</span>
      </el-menu-item>
    </el-sub-menu>
    <el-menu-item index="5" route="/about">
      <el-icon i-carbon:help />
      <span class="text-xl">关于</span>
    </el-menu-item>
  </el-menu>
</template>

<style lang="css" scoped>
.menu .el-menu-item:hover {
  background-color: rgb(59, 130, 246);
}
.menu .el-menu-item.is-active {
  background-color: rgb(59, 130, 246);
  border-bottom: 2px solid rgb(59, 130, 246);
}
.menu .el-icon {
  width: 32px;
  height: 328px;
}
</style>
